<template>
	<div class="dashboard p-6 space-y-6">
		<!-- 顶部欢迎横幅 -->
		<el-alert title="欢迎使用供应链管理系统" type="success" show-icon />

		<!-- 数据概览区 -->
		<el-row :gutter="20">
			<el-col :span="6" v-for="item in stats" :key="item.label">
				<el-card>
					<el-statistic :title="item.label" :value="item.value" />
				</el-card>
			</el-col>
		</el-row>

		<!-- 图表区 -->
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card>
					<h3 class="text-lg font-semibold mb-2">销售趋势</h3>
					<SalesChart />
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<h3 class="text-lg font-semibold mb-2">客户分布</h3>
					<CustomerPieChart />
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<h3 class="text-lg font-semibold mb-2">订单类型占比</h3>
					<OrderTypeChart />
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card>
					<h3 class="text-lg font-semibold mb-2">库存分布</h3>
					<StockBarChart />
				</el-card>
			</el-col>
		</el-row>

		<!-- 待办事项区 -->
		<el-card>
			<h3 class="text-lg font-semibold mb-2">待办事项</h3>
			<el-table :data="tasks" border>
				<el-table-column prop="name" label="事项" />
				<el-table-column prop="status" label="状态" />
				<el-table-column prop="deadline" label="截止日期" />
			</el-table>
		</el-card>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import SalesChart from './SalesChart.vue'    
import CustomerPieChart from './CustomerPieChart.vue'    
import OrderTypeChart from './OrderTypeChart.vue'    
import StockBarChart from './StockBarChart.vue'    


const stats = ref([
	{ label: '订单总数', value: 1234 },
	{ label: '销售额 (元)', value: 560000 },
	{ label: '客户总数', value: 86 },
	{ label: '库存总量', value: 3200 }
])

const tasks = ref([
	{ name: '审批单001', status: '待处理', deadline: '2024-06-30' },
	{ name: '库存盘点', status: '处理中', deadline: '2024-06-28' },
	{ name: '系统更新', status: '已完成', deadline: '2024-06-20' }
])
</script>

<style scoped>
.dashboard .el-card {
	transition: all 0.2s;
}

.dashboard .el-card:hover {
	transform: translateY(-4px);
}
</style>
  
